import { Avatar, Card, List, Modal, Spin,Input ,Button, message} from "antd";
import React from "react";
import formImg from "@/assets/formItem.png"
import UserSession from "@/UserSession";
import Ellipsis from "@/components/Ellipsis";
import styles from "./index.less"
import { formRemove, formStatus } from "@/services/formInteraction";

class FormInteractionList extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      spinning:false
    }
  }

  removeConfirm = id => {
    Modal.confirm({
      title:"确认删除该表单交互场景？",
      okText:"确定",
      cancelText:"取消",
      okType:"danger",
      onOk:() => {
        this.doRemove(id)
      }
    })
  }

  doRemove = async id => {
    const res = await formRemove({id})
    message.info(res.message)
    const { current } = this.props;
    this.props.doSearchByPage(current)
  }

  toEditPage = (id,name) => {
    const { history,rootId } = this.props;
    let rootRouter = UserSession.isSystemKnowledge() ? 'systemKnowledge' : 'myKnowledge'
    history.push({
			pathname: "/knowledgeDesign/"+rootRouter+"/"+rootId+"/formInteraction/edit/flow",
			query: {id,formName:name},
		});
  }

  fixStatus = async (id,item) => {
    const res = await formStatus( { id, disabled: !item.disabled })
    message.info(res.message);
    const { current } = this.props;
    this.props.doSearchByPage(current)
  }

  openCreateModal = () => {
    this.props.openCreateModal()
  }



  render(){
    const { list,current,size,total,spinning,doSearchByPage,search,doSearchByQuery,changeSearch} = this.props;
    return (
      <Spin spinning={spinning}>
        <div className={styles.cardList}>
          <div className={styles.top}>
            <Input.Search placeholder="请输入表单名称" style={{width:300}} onSearch={doSearchByQuery} value={search} onChange={changeSearch} />
            <Button type="primary" onClick={() => this.openCreateModal()}  disabled={UserSession.isSystemKnowledge()}>创建表单交互</Button>
          </div>
          <List
            rowKey='id'
            pagination={{
              onChange: doSearchByPage,
              current: current,
              pageSize: size,
              total: parseInt(total),
              showQuickJumper: true,
            }}
            grid={{ gutter: 24, lg: 4, md: 3, sm: 2, xs: 1 }}
            dataSource={list}
            renderItem={(item) => (
							<List.Item key={item._id}>
								<Card
									hoverable
									className={styles.card}
									actions={UserSession.isSystemKnowledge() ? [
                    <a onClick={() => this.toEditPage(item.id, item.name)}>查看</a>,
                  ] : [
										<a onClick={() => this.removeConfirm(item.id)}>删除</a>,
                    <a onClick={() => this.fixStatus(item.id, item)}>
											{" "}{item.disabled ? ("启用") : ("停用")}{" "}
										</a>,
										<a onClick={() => this.toEditPage(item.id, item.name)}>编辑</a>,
									]}
								>
									<Card.Meta
										avatar={
											<Avatar className={styles.cardAvatar}>
												<img src={formImg} style={{ width: '16px' }} />
											</Avatar>
										}
										title={<a>{item.name}</a>}
										description={
											UserSession.isSystemKnowledge() || UserSession.isAdmin() ? null : <Ellipsis
												className={styles.item}
												style={item.disabled ? {
													background: '#FF9640',
													borderColor: '#FF9640',
												} : {
													background: '#14C6A1',
													borderColor: '#14C6A1',
												}}
												lines={3}
											>
												{item.disabled ? (
													<span style={{ color: "#FFFFFF" }}>已停用</span>
												) : (
													<span style={{ color: "#FFFFFF" }}>启用中</span>
												)}
											</Ellipsis>
										}
									/>
								</Card>
							</List.Item>
						)}
            
          >
          
          </List>

        </div>
      </Spin>
    )
  }
}

export default FormInteractionList